<template>
  <el-container class="app">
    <el-main>
      <el-alert
          type="warning"
          :title="title"
          :description="description"
          center
          show-icon
      />
      <!-- 轮播图部分 -->
      <section class="carousel-section">
        <el-carousel type="card" trigger="hover" autoplay>
          <el-carousel-item v-for="(item, index) in banners" :key="index">
            <el-image :src="getImageUrl(item)" alt="banner" />
          </el-carousel-item>
        </el-carousel>
      </section>

      <!-- 新书部分 -->
      <section class="new-books">
        <h2>书籍上新</h2>
        <el-row :gutter="20">
          <el-col :span="4" v-for="(book, index) in newBooks" :key="index">
            <el-card :body-style="{ padding: '20px' }" class="recommend-book-card" @click="goToBookDetail(book.bookNumber)">
              <div class="book-cover-container">
                <el-image :src="getImageUrl(book.bookCover)" alt="封面" class="book-cover" />
              </div>
              <el-link class="book-name">{{ book.bookName }}</el-link>
              <p class="author">{{ book.bookAuthor }}</p>
              <el-text class="description">{{ book.bookDescription }}</el-text>
            </el-card>
          </el-col>
        </el-row>
      </section>

      <!-- 随机推荐书籍部分 -->
      <section class="hot-books">
        <h2>随机推荐书籍</h2>
        <el-row :gutter="20">
          <el-col :span="4" v-for="(book, index) in randomBooks" :key="index">
            <el-card :body-style="{ padding: '20px' }" class="recommend-book-card" @click="goToBookDetail(book.bookNumber)">
              <div class="book-cover-container">
                <el-image :src="getImageUrl(book.bookCover)" alt="封面" class="book-cover" />
              </div>
              <el-link class="book-name">{{ book.bookName }}</el-link>
              <p class="author">{{ book.bookAuthor }}</p>
              <el-text class="description">{{ book.bookDescription }}</el-text>
            </el-card>
          </el-col>
        </el-row>
      </section>
    </el-main>
  </el-container>
</template>

<script setup>import { ref, onMounted } from 'vue';
import http from '../utils/axios.js';
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const title = ref('');
const description = ref('');
const banners = ref([]);
const newBooks = ref([]);
const randomBooks = ref([]);

// 获取公告信息
const fetchAnnouncement = async () => {
  try {
    const response = await http.get('/home/notice');
    if (response.data && response.status) {
      const notice = response.data[0];
      title.value = notice.noticeTitle;
      const formatDate = (isoString) => {
        const date = new Date(isoString);
        return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')} ${date.getHours().toString().padStart(2,'0')}:${date.getMinutes().toString().padStart(2,'0')}:${date.getSeconds().toString().padStart(2,'0')}`;
      };
      description.value = `${notice.noticeContent}
      -发布日期:${formatDate(notice.createTime)}`;
    } else {
      description.value = '没有公告信息';
    }
  } catch (error) {
    console.error('获取公告信息时出错:', error);
    description.value = '没有公告信息';
  }
};

// 获取最新书籍
const fetchNewBooks = async () => {
  try {
    const response = await http.get('/home/newBook');
    newBooks.value = response.data ? response.data : [];
  } catch (error) {
    console.error('获取最新书籍时出错:', error);
  }
};

// 获取随机推荐书籍
const fetchRandomBooks = async () => {
  try {
    const response = await http.get('/home/randomBook');
    randomBooks.value = response.data && Array.isArray(response.data) ? response.data : [];
  } catch (error) {
    console.error('获取随机推荐书籍时出错:', error);
  }
};

// 获取首页管理规则以获取轮播图
const fetchHomeRole = async () => {
  try {
    const response = await http.get('/home/role');
    if (response.code === 200) {
      banners.value = [
        response.data.homeCarousel1,
        response.data.homeCarousel2,
        response.data.homeCarousel3
      ].filter(banner => banner);
    } else {
      ElMessage.error(response.data);
    }
  } catch (error) {
    ElMessage.error('获取首页管理规则时发生异常');
  }
};

const getImageUrl = (coverName) => {
  if (coverName) {
    return `http://localhost:8080/book/image/${coverName}`;
  }
  return 'http://localhost:8080/book/image/null.jpg'; // 如果没有封面，则返回默认图片
};

const goToBookDetail = (bookNumber) => {
  router.push(`/book/${bookNumber}`);
};

// 页面加载时获取数据
onMounted(() => {
  fetchAnnouncement();
  fetchNewBooks();
  fetchRandomBooks();
  fetchHomeRole(); // 获取轮播图
});
</script>
<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}

img {
  width: 100%;
  height: auto;
}

.app {
  padding: 20px;
  background-image: url('../assets/images/background.jpg'); /* 添加背景图片 */
  background-size: cover; /* 使背景图片覆盖整个容器 */
  background-position: center; /* 将背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  min-height: 100vh; /* 确保背景图片至少覆盖整个视口高度 */
}

h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px; /* 添加行间距 */
}

h2, h3, h4 {
  color: #333;
  margin-bottom: 20px; /* 添加行间距 */
}

/* 轮播图部分样式 */
.carousel-section {
  justify-content: center;
  margin-top: 20px;
}

/* 新书部分样式 */
.new-books {
  margin-top: 40px;
}

.new-books h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

/* 随机推荐书籍部分样式 */
.hot-books {
  margin-top: 40px;
}

.hot-books h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

/* 推荐书籍卡片样式 */
.recommend-book-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.recommend-book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recommend-book-card .book-cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px; /* 设置封面图片的固定高度 */
}

.recommend-book-card .book-cover {
  height: 100%; /* 使图片高度占满容器 */
  object-fit: cover; /* 裁剪图片以适应容器 */
  border-radius: 4px; /* 添加圆角 */
}

.recommend-book-card .book-name {
  font-size: 18px;
  margin-top: 10px;
  white-space: nowrap; /* 防止文本换行 */
  font-weight: bold;
  overflow: hidden;    /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
  width: 100%;         /* 确保元素有宽度限制 */
}

.recommend-book-card .author {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px; /* 添加行间距 */
  display: -webkit-box; /* 使用 WebKit 盒模型 */
  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
  -webkit-line-clamp: 1; /* 限制显示一行 */
  line-clamp: 1;
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
}

.recommend-book-card .description {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px; /* 添加行间距 */
  display: -webkit-box; /* 使用 WebKit 盒模型 */
  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  line-clamp: 2;
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
}

/* el-row 和 el-col 的间距 */
.el-row {
  margin-bottom: 20px; /* 添加行间距 */
}

.el-col {
  margin-bottom: 20px; /* 添加列间距 */
}
</style>

